{{define "head"}}
<style>
      
  .layui-tree-icon{
    box-sizing: content-box !important;
  }

  .layui-tree-entry{
    box-sizing: content-box !important;
  }

  #field{
    display: none;
  }

  #score{
    display: none;
  }

  #id{
    display: none;
  }

  #fieldPre{
    display: none;
  }

  #scorePre{
    display: none;
  }

  #idPre{
    display: none;
  }

  .collapse .list-group-item:last-child{
    border-bottom: 0px;
  }

  .father-node{
    border-bottom: 0px;
  }

  .text-show{
    width: 200px;
  }

  #page-load{
    height: 40px;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
  }
</style>
<link rel="stylesheet" href="/statics/bootstrap/css/bootstrap-icons.css" media="all">
{{end}}


{{define "body"}}
<!-- 标题模块 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Go Redis Manager</a>
  

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal">
        新建连接
      </button>
    </form>
    &nbsp;
    <form class="form-inline my-2 my-lg-0 ajaxForm" action="/save_configfile" method="post">
      <button type="submit" class="btn btn-primary btn-sm">
        持久化连接信息
      </button>
    </form>
    &nbsp;
    {{if compareInt .account_num 0}}
    <form class="form-inline my-2 my-lg-0 ajaxForm" action="/login_out" method="post">
      <button type="submit" class="btn btn-danger btn-sm">
        退出
      </button>
    </form>
    {{end}}

  </div>
</nav>


<div class="row">
  <div id="left-sec" class="col-sm-5" style="padding-right: 0px;border-right: 3px solid rgb(217 217 217);">
    
    <form action="/switch" method="post" class="ajaxForm" autocomplete="off">
    <div class="col-sm-12" style="margin-top: 10px;">
      <div class="row">
        <div class="form-group col-md-5">
          <select id="inputState" name="service" class="form-control">
            <option value="">请选择连接</option>
            {{range $k,$v := .services}}
              {{if equal $k $.service_name}}
                <option selected value="{{$k}}">{{$k}}</option>
              {{else}}
                <option value="{{$k}}">{{$k}}</option>
              {{end}}
            {{end}}
          </select>
        </div>

        <div class="form-group col-md-4">
          <select id="inputState" name="db" class="form-control">
            {{range $k,$v := .db_slice}}
              {{if equalInt $k $.db}}
                <option selected value="{{$k}}">{{$k}}</option>
              {{else}}
                <option value="{{$k}}">{{$k}}</option>
              {{end}}
            {{end}}
          </select>
        </div>

        <div class="form-group col-md-2">
          <button type="submit" class="form-control btn btn-primary">切换</button>
        </div>

      </div>
    </div>
    </form>

    <div class="col-sm-12">

    <form action="/search_key" method="post" class="search_key">  
      <div class="btn-toolbar mb-12" role="toolbar" aria-label="Toolbar with button groups">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text" id="btnGroupAddon">查看指定key</div>
          </div>
          <input type="text" name="key" class="form-control" placeholder="" autocomplete="off">
          <input type="hidden" name="type" value="1">
        </div>
        <div class="input-group">
          <button type="submit" class="form-control btn btn-primary" >搜索</button>
        </div>
      </div>
    </form>
      
    </div>

    <div class="col-sm-12" style="margin-top: 10px;">

      <form action="/search_key" method="post" class="search_key">
      <div class="btn-toolbar mb-12" role="toolbar" aria-label="Toolbar with button groups">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text" id="btnGroupAddon">筛选key前缀</div>
          </div>
          <input type="text" class="form-control" name="key" placeholder="" autocomplete="off">
          <input type="hidden" name="type" value="2">
        </div>
        <div class="input-group">
          <button type="submit" class="form-control btn btn-primary" >搜索</button>
        </div>
      </div>
      </form>
    </div>

    <div class="col-sm-12" style="margin-top: 10px;">
      <button data-toggle="modal" data-target="#addKeyModal" type="button" class="btn btn-light btn-sm">新建键值</button>
    </div>
    
    <div id="tree" class="col-sm-12">
      <div id="main" class="demo-tree">
        <ul id="keys"></ul>
        <div id="page"></div>
      </div>
    </div>

  </div>
  <div class="col-sm-7" style="padding-left: 0px;">
    <iframe name="main" scrolling=no id="iframepage"  frameborder=0 width="100%" src=""></iframe>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">新建连接</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/save_config" method="post" class="ajaxForm" autocomplete="off">
      <div class="modal-body form-row">
          <div class="form-group col-md-12">
            <label>连接名称</label>
            <input type="text" name="service_name" class="form-control" value="" required>
          </div>

          <div class="form-row col-md-12">
            <div class="form-group col-md-6">
              <label>IP地址</label>
              <input type="text" name="host" class="form-control" value="" required>
            </div>
            <div class="form-group col-md-6">
              <label>端口号</label>
              <input type="text" name="port" class="form-control" value="" required>
            </div>
          </div>

          <div class="form-group col-md-12">
            <label>密码</label>
            <input type="password" name="password" value="" class="form-control">
          </div>

          <div class="form-group col-md-12">
            <div class="form-check">
              <input class="form-check-input" name="use_ssh" value="1" type="checkbox" id="gridCheck">
              <label class="form-check-label" for="gridCheck">
                启用SSH连接
              </label>
            </div>
          </div>

          <div id="ssh" style="display: none;">
            <div class="form-row col-md-12">
              <div class="form-group col-md-6">
                <label>SSH地址</label>
                <input type="text" name="ssh_host" value="" class="form-control">
              </div>
              <div class="form-group col-md-6">
                <label>SSH端口号</label>
                <input type="text" name="ssh_port" value="" class="form-control">
              </div>
            </div>
  
            <div class="form-group col-md-12">
              <label>SSH用户</label>
              <input type="text" name="ssh_username" value="" class="form-control">
            </div>
            
            <div class="form-group col-md-12">
              <label>SSH密码</label>
              <input type="password" name="ssh_password"  value="" class="form-control">
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </form>
    </div>
  </div>
</div>


<!-- 新建键值 Modal -->
<div class="modal fade" id="addKeyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">添加键值</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/add_key" method="post" id="addKeyForm" autocomplete="off">
      <div class="modal-body">
          <div class="form-group">
            <label>Key值</label>
            <input type="text" name="key" class="form-control" required>
          </div>
          
          <div class="form-group">
            <label for="exampleFormControlSelect1">类型</label>
            <select name="type" class="form-control" id="exampleFormControlSelect1">
              <option value="string">string</option>
              <option value="list">list</option>
              <option value="set">set</option>
              <option value="zset">zset</option>
              <option value="hash">hash</option>
              <option value="stream">stream</option>
            </select>
          </div>

          <div id="field" class="form-group">
            <label for="exampleFormControlTextarea1">字段名</label>
            <input type="field" name="field" class="form-control">
          </div>

          <div id="score" class="form-group">
            <label for="exampleFormControlTextarea1">分数</label>
            <input type="number" name="score" class="form-control">
          </div>

          <div id="id" class="form-group">
            <label for="exampleFormControlTextarea1">ID</label>
            <input type="text" name="id" value="*" class="form-control">
          </div>

          <div class="form-group">
            <label for="exampleFormControlTextarea1">字段值</label>
            <textarea class="form-control" name="value" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </form>
    </div>
  </div>
</div>


<!-- 新建已有字段键值 Modal -->
<div class="modal fade" id="addPreKeyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">添加键值</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/add_key" method="post" id="addPreKeyForm" autocomplete="off">
      <div class="modal-body">
         
          <div class="form-group">
            <label>Key值</label>
            <div class="input-group">
              <div id="prekey" class="input-group-addon" style="background: darkgrey;color: currentcolor;font-size: 15px;padding: 10px;"></div>
              <input type="text" name="key"  class="form-control">
            </div>
          </div>
          <input type="hidden" name="prekey" class="form-control" required value="">

          <div class="form-group">
            <label for="exampleFormControlSelect1Pre">类型</label>
            <select name="type" class="form-control" id="exampleFormControlSelect1Pre">
              <option value="string">string</option>
              <option value="list">list</option>
              <option value="set">set</option>
              <option value="zset">zset</option>
              <option value="hash">hash</option>
              <option value="stream">stream</option>
            </select>
          </div>

          <div id="fieldPre" class="form-group">
            <label for="exampleFormControlTextarea1">字段名</label>
            <input type="field" name="field" class="form-control">
          </div>

          <div id="scorePre" class="form-group">
            <label for="exampleFormControlTextarea1">分数</label>
            <input type="number" name="score" class="form-control">
          </div>

          <div id="idPre" class="form-group">
            <label for="exampleFormControlTextarea1">ID</label>
            <input type="text" name="id" value="*" class="form-control">
          </div>

          <div class="form-group">
            <label for="exampleFormControlTextarea1">字段值</label>
            <textarea class="form-control" name="value" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </form>
    </div>
  </div>
</div>


{{end}}


{{define "script"}}

<script src="/statics/js/tree.js"></script>
<script src="/statics/js/index.js"></script>
<script type="text/javascript">
  $("#gridCheck").change(function(){
    if($(this).prop('checked')){
      $("#ssh").show();
      $("input[name=ssh_host]").attr("required",'');
      $("input[name=ssh_port]").attr("required",'');
      $("input[name=ssh_password]").attr("required",'');
    }else{
      $("#ssh").hide();
      $("input[name=ssh_host]").removeAttr("required");
      $("input[name=ssh_port]").removeAttr("required");
      $("input[name=ssh_password]").removeAttr("required");
    }
  })
</script>
<script type="text/javascript" language="javascript"> 
  function calcPageHeight(doc) {
      var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
      var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
      var height  = Math.max(cHeight, sHeight)
      return height
  }
  window.onload = function() {
      var height = calcPageHeight(document)
      parent.document.getElementById('iframepage').style.height = height+'px';
  }

  $("#tree").attr('style','height:'+($(document).height() - $("#tree").offset().top - 20)+'px;margin-top: 15px;overflow-y: auto;');
  </script>
{{end}}